<template>
  <div class="wrapper">
    <card
      _Title="近期收藏"
      :_Tabs="favoriteWay"
      @_Change="change"
      :_Size="16"
      v-if="!homePage"
    />
    <card
      _Title="近期收藏"
      :_Size="16"
      :_Tabs="favoriteWay"
      @_Change="change"
      _More="全部收藏"
      _Src="/home/Favorites"
      v-else
    >
    </card>
    <div v-if="list.length">
      <template v-for="item in list">
        <div class="goodsItem" :key="item.skuId">
          <div class="goodsImg hover-pointer">
            <img :src="item.skuImg" />
          </div>
          <!-- <div class="goodsImg hover-pointer" v-else>
            <img :src="item.storeLogo" />
          </div> -->
          <div
            class="goodsTitle hover-color"
            @click="buynow(item.skuId, item.spuId, item.catalogId)"
          >
            {{ item.skuName }}
          </div>
          <!-- <div v-else class="goodsTitle hover-pointer">
            {{ item.storeName }}
          </div> -->
          <div class="goodsPrice">
            <span>{{ item.skuPrice | unitPrice('￥') }}</span>
            <Tag color="error" v-if="item.selfOperated">商家自营</Tag>
          </div>
          <div class="goodsBuy">
            <Button
              size="small"
              type="primary"
              @click="buynow(item.skuId, item.spuId, item.catalogId)"
              >立即购买</Button
            >
            <!-- 暂未设置店铺 -->
            <!-- <Button size="small" type="primary" @click="goShop(item.id)" v-else>店铺购买</Button> -->
            <Button size="small" @click="cancel(item.skuId)">取消收藏</Button>
            <!-- <Button size="small" v-if="params.type === 'SHOP'" @click="cancel(item.id)">取消收藏</Button> -->
          </div>
        </div>
      </template>
      <Spin size="large" fix v-if="spinShow"></Spin>
    </div>
    <!-- 分页 -->
    <div class="page-size" v-if="!homePage">
      <Page
        :total="total"
        @on-change="changePageNum"
        @on-page-size-change="changePageSize"
        :page-size="params.limit"
        show-total
        show-sizer
      >
      </Page>
    </div>
    <empty v-else />
  </div>
</template>

<script>
import { collectList, cancelCollect } from '@/api/member.js';
import * as ApiMember from '@/api/MyApi/Member';
export default {
  name: 'Favorites',
  props: {
    homePage: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      favoriteWay: ['收藏商品', '收藏店铺'], // 收藏分类
      list: [], // 收藏列表
      total: 0, // 收藏总数
      params: {
        // 请求参数
        page: 1,
        limit: 10,
      },
      spinShow: false, // 加载状态
    };
  },
  methods: {
    getList() {
      // 获取收藏列表
      this.spinShow = true;
      collectList(this.params).then((res) => {
        this.spinShow = false;
        if (res.success) this.list = res.result.records;
      });
    },
    change(index) {
      // tab栏切换
      if (index === 0) {
        this.params.type = 'GOODS';
      }
      if (index === 1) {
        this.params.type = 'SHOP';
      }
      this.getList();
    },
    cancel(id) {
      // 取消收藏
      // let typeName = this.params.type === 'GOODS' ? '商品' : '店铺'
      let userInfo = JSON.parse(localStorage.getItem('userInfo'));
      console.log('点击按钮');
      this.$Modal.confirm({
        title: 'Title',
        content: `<p>确定取消收藏该商品吗？</p>`,
        onOk: () => {
          // cancelCollect(this.params.type, id).then(res => {
          //   if (res.success) {
          //     this.getList();
          //   }
          // })
          ApiMember.cancelCollection(userInfo.id, id).then((res) => {
            if (res.data.code == 201) {
              this.getCollectList();
            }
          });
        },
      });
    },
    buynow(skuId, spuId, catalogId) {
      // 跳转详情
      let url = this.$router.resolve({
        path: '/goodsDetail',
        query: { skuId, spuId, catalogId },
      });
      window.open(url.href, '_blank');
    },
    goShop(id) {
      // 跳转店铺页面
      let url = this.$router.resolve({
        path: '/merchant',
        query: { id },
      });
      window.open(url.href, '_blank');
    },
    getCollectList() {
      this.spinShow = true;
      let userInfo = JSON.parse(localStorage.getItem('userInfo'));
      this.params.userId = userInfo.id;
      let data = JSON.parse(JSON.stringify(this.params));
      ApiMember.getUserCollectionByPage(data).then((res) => {
        this.spinShow = false;
        if (res.data.code == 201) {
          this.list = res.data.obj.records;
          this.total = res.data.obj.total;
        }
      });
    },
    changePageNum(val) {
      // 分页改变页码
      this.params.page = val;
      this.getList();
    },
    changePageSize(val) {
      // 分页改变页数
      this.params.page = 1;
      this.params.limit = val;
      this.getList();
    },
  },
  mounted() {
    if (this.homePage) this.params.limit = 5;
    // this.getList()
    this.getCollectList();
  },
};
</script>

<style scoped lang="scss">
.goodsShop,
.goodsImg,
.goodsPrice,
.goodsShop,
.goodsTitle {
  margin: 0 6px;
}

.wrapper {
  margin-bottom: 40px;
}

.goodsItem {
  display: flex;
  height: 60px;
  line-height: 60px;
  margin-bottom: 10px;

  > .goodsImg {
    width: 60px;
    height: 60px;
    overflow: hidden;

    > img {
      width: 100%;
      height: 100%;
    }
  }

  > .goodsPrice,
  .goodsShop {
    width: 150px;
    text-align: center;
  }

  > .goodsTitle {
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.goodsBuy {
  margin-left: 80px;

  > * {
    margin: 0 4px;
  }
}

.page-size {
  text-align: right;
}
</style>
